<template>

  <div >
    <div v-for="essayData in essayDataList" :key="essayData.essayId" >
      <div class="entity-item">
        <!--    <div class="top-day">-->
        <!--      <span>{{essayData.user1name}}赞同了回答·</span>-->
        <!--      <span>{{essayData.days}}天前</span>-->
        <!--    </div>-->
        <div class="user">
          <!--      {{essayData.userImg}}-->
          <el-avatar
              :src="essayData.userImageUrl"
          />
          {{ essayData.userNickname }}
        </div>
        <div class="title" @click="toEssayInfo(essayData.essayId)">
          {{ essayData.essayTitle }}
        </div>
        <div class="displayText">
          {{ essayData.displayText }}
        </div>
        <div class="bottom-time">
          <span>发布于{{ essayData.createTime }}</span>
        </div>

        <div class="bottom-items">
          <div v-if=" essayData.nowUserLiked === '0' " class="up-down" @click="liked(essayData.essayId)">赞同({{essayData.likeCount}})</div>
          <div v-else-if=" essayData.nowUserLiked !== '0' " class="up-downed" @click="cancelLiked(essayData.essayId)">已赞同({{essayData.likeCount}})</div>

          <div v-if=" essayData.nowUserCollected === '0' " class="up-down" @click="collected(essayData.essayId)">收藏({{essayData.collectCount}})</div>
          <div v-if=" essayData.nowUserCollected !== '0' " class="up-downed" @click="cancelCollected(essayData.essayId)">已收藏({{essayData.collectCount}})</div>

          <div class="up-down" @click="changeShowComment(essayData.essayId);">评论({{essayData.commentCount}})</div>
        </div>
        <div v-if="essayData.showComment === '1' ">
          <CommentCard
              entityType="essay"
              :entityId="essayData.essayId"
          >
          </CommentCard>
        </div>
<!--        <infinite-loading @infinite="requestNextData"></infinite-loading>-->
      </div>
    </div>
    <div class="more-data" @click="requestNextData">{{ pageText }}</div>
  </div>

</template>
<script>
import {defineComponent} from 'vue';
import axios from "@/settings/axios";
import * as commonUtils from "@/utils/CommonUtils";
import {ElMessage} from "element-plus";
import * as nameMapping from "@/settings/nameMapping"
import CommentCard from "@/components/CommentCard";
import router from "@/router";

export default defineComponent({
  name: "essayCard",
  data() {
    return {
      essayDataList: [],
      pageNo: 1,
      pageSize: 10,
      pageText: nameMapping.LOAD_DATA
    };
  },
  components:{
    CommentCard
  },
  computed: {
    queryText() {
      return this.$store.state.queryText;
    }
  },
  watch: {
    queryText: {
      deep: true,
      immediate: true,
      async handler(newValue, oldValue) {
        oldValue;
        this.clearData();

        let params = {
          "content": newValue,
          "pageNo": this.pageNo,
          "pageSize": this.pageSize,
        }

        let essayDataList = await axios.get("/shane_essay/page_by_content", params);
        Array.prototype.push.apply(this.essayDataList, essayDataList);
        if (essayDataList.length === 0) {
          this.pageText = nameMapping.NO_DATA;
        }
        else if (essayDataList.length < 10) {
          this.pageText = nameMapping.NO_NEXT_DATA;
        }

      }
    },
  },
  methods:{
    async liked(essayId){
      let params = {
        "essayId": essayId
      }
      let message = await axios.post("/shane_essay/insert_one_essay_likes", params);
      const essayData = this.essayDataList.find(obj => obj.essayId === essayId);
      essayData.nowUserLiked = "1";
      essayData.likeCount = commonUtils.strAddOne(essayData.likeCount);
      ElMessage({
        showClose: true,
        message: message,
        type: 'success',
        center: true,
      });
    },
    async cancelLiked(essayId) {
      let params = {
        "essayId": essayId
      }
      let message = await axios.post("/shane_essay/delete_one_essay_likes", params);
      const essayData = this.essayDataList.find(obj => obj.essayId === essayId);
      essayData.nowUserLiked = "0";
      essayData.likeCount = commonUtils.strSubOne(essayData.likeCount);
      ElMessage({
        showClose: true,
        message: message,
        type: 'success',
        center: true,
      });
    },
    async collected(essayId) {
      let params = {
        "essayId": essayId
      }
      let message = await axios.post("/shane_essay/insert_one_essay_collect", params);
      const essayData = this.essayDataList.find(obj => obj.essayId === essayId);
      essayData.nowUserCollected = "1";
      essayData.collectCount = commonUtils.strAddOne(essayData.collectCount)
      ElMessage({
        showClose: true,
        message: message,
        type: 'success',
        center: true,
      });
    },
    async cancelCollected(essayId) {
      let params = {
        "essayId": essayId
      };
      let message = await axios.post("/shane_essay/delete_one_essay_collect", params);
      console.log(message);
      const essayData = this.essayDataList.find(obj => obj.essayId === essayId);
      essayData.nowUserCollected = "0";
      essayData.collectCount = commonUtils.strSubOne(essayData.collectCount);
      ElMessage({
        showClose: true,
        message: message,
        type: 'success',
        center: true,
      });
    },
    async requestNextData(){
      if (this.pageText === nameMapping.NO_NEXT_DATA) {
        ElMessage({
          showClose: true,
          message: nameMapping.NO_NEXT_DATA,
          type: 'message',
          center: true,
          duration: 1000,
        });
        return 0;
      }

      ElMessage({
        showClose: true,
        message: nameMapping.LOADING,
        type: 'message',
        center: true,
        duration: 1000,
      });

      this.pageNo += 1;
      let params = {
        "content": this.essayQuery,
        "pageNo": this.pageNo,
        "pageSize": this.pageSize,
      };
      let essayDataList = await axios.get("/shane_essay/page_by_content", params);
      console.log(essayDataList);
      Array.prototype.push.apply(this.essayDataList, essayDataList);
      if (essayDataList.length === 0) {
        this.pageText = nameMapping.NO_NEXT_DATA;
        return 0;
      }

    },
    clearData() {
      this.essayDataList = [];
      this.pageNo = 1;
      this.pageSize = 10;
      this.pageText = nameMapping.LOAD_DATA;
    },
    async changeShowComment(essayId) {
      const essayData = await this.essayDataList.find(obj => obj.essayId === essayId);
      if ( essayData.showComment === '1' ) {
        essayData.showComment = '0'
      }
      else if (essayData.showComment === '0') {
        essayData.showComment = '1'
      }
    },
    toEssayInfo(essayId) {
      let params = {
        "essayId": essayId
      };
      let routeData =router.resolve({
        path: "/essay/info",
        query: params
      });
      window.open(routeData.href, '_blank')
    },
  }

});
</script>

<style scoped>
.entity-item {
  padding: 40px
}

.top-day {
  color: #b4b4b4;
  padding-bottom: 10px;
}

.user {
  color: #646262FF;
  padding-bottom: 10px;
  display: flex;
}

.title {
  color: #000;
  font-size: larger;
  padding-bottom: 10px;
  font-weight: bold;
  cursor:pointer;
}

.displayText {
  padding-bottom: 10px;
}

.bottom-time {
  color: #a2a2a2;
  font-size: 13px;
}

.bottom-items {
  display: flex;
}

.up-down {
  background-color: #e4eefb;
  color: #056ce7;
  width: 80px;
  text-align: center;
  height: 24px;
  line-height: 20px;
  border-radius: 10px;
  margin: 10px 20px 0 0;
}

.up-down:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
  user-select:none;
}

.up-downed {
  background-color: #e4eefb;
  color: #8a8f97;
  width: 90px;
  text-align: center;
  height: 24px;
  line-height: 20px;
  border-radius: 10px;
  margin: 10px 20px 0 0;
  user-select:none;
}

.up-down:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
  user-select:none;
}

.up-downed:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
  user-select:none;
}

.like {
  color: #8392a4;
  margin: 10px 20px 0 0;
}

.essay-main {
  overflow: scroll;
  height: 100vh;
}

.more-data {
  text-align: center;
  padding: 20px 30px;
  border-bottom: #e3e3e3 2px solid;
  border-top: #e3e3e3 2px solid;
}

.more-data:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
  border-top: 2px solid #54b4f8;
}
</style>
